<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
		var model = {
			name: "wiz",
			isShow: true,
			person: {name: "think", age: 30},
			arr: [1, 2, 3],
		}
		var toString2 = {}.toString;
		function observerFactory(model) {
			for(var property in model) {
				addObserver(model, property, model[property]);
				if(toString2.call(model[property])==="[object Object]") {
					observerFactory(model[property]);
				}else if(toString2.call(model[property])==="[object Array]") {
					["concat", "join", "filter", "pop", "push", "shift", "slice", "splice", "unshift"].forEach(function(method) {
						var _o_ = Array.prototype[method];
						model[property][method] = function(arguments) {
							var res = _o_.call(this, arguments);
							notify(model, property, model[property]);
							return res;
						}
					});
				}
			}
		}
		function addObserver(model, property, value) {
			Object.defineProperty(model, property, {
				enumerale: true,
				configurable: false,
				set: function(nvalue) {
					notify(model, property, nvalue);
					value = nvalue;
				},
				get: function () {
					// console.log("getter!!!");
					return value;
				},
			});
		}
		function notify(model, property, nvalue) {
			console.log(model);
			console.log("的" + property + "发生了改变，改变后的结果为",nvalue);
		}

		observerFactory(model);
		model.arr.push(88);
		model.person.name = "star";
		model.name = "kobe";
	</script>
</body>
</html>